<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    default-active="1"
    text-color="#fff"
    :unique-opened="true"
    @open="handleOpen"
    @close="handleClose"
    :router="true"
    :collapse="isCollapse"
    :collapse-transition="true"
  >
    <!-- 使用隐藏溢出来控制标题收缩不换行 -->
    <h1 style="width: 200px; overflow: hidden; color: white">
      {{ title }}
    </h1>
    <template v-for="group in menuList">
      <el-submenu
        v-if="group.children && group.children.length > 0 && group.hidden"
        :key="group.id"
        :index="group.id"
      >
        <template slot="title">
          <i :class="group.icon"></i>
          <span>{{ group.title }}</span>
        </template>
        <el-menu-item
          v-for="menu in group.children"
          :key="menu.id"
          :index="menu.path"
          @click="clickMenu(menu)"
        >
          {{ menu.title }}
        </el-menu-item>
      </el-submenu>
      <el-menu-item
        v-if="!group.children && group.hidden"
        :key="group.id"
        :index="group.path"
        @click="clickMenu(group)"
      >
        <i :class="group.icon"></i>
        <span slot="title">{{ group.title }}</span>
      </el-menu-item>
    </template>
  </el-menu>
  <!-- </el-col>
    </el-row>
  </div> -->
</template>

<script>
export default {
  data() {
    return {
      title: "Panda Backstage",
      menuList: this.$store.getters.routes[0].children,
    };
  },
  computed: {
    isCollapse() {
      return this.$store.getters.isCollapse;
    },
  },
  watch: {
    isCollapse: {
      handler(newValue) {
        if (newValue) this.title = "Panda";
        else this.title = "Panda Backstage";
      },
    },
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 面包屑 点击菜单显示title
    clickMenu(item) {
      this.$store.commit("selectMenu", item);
    },
  },
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  /* min-height: 400px; */
}
#menu_container {
  height: 100%;
}

/* .title {
  height: 60px;
  line-height: 60px;
  background-color: #545c64;
  color: #fff;
} */
/* .title h1 {
  display: inline-block;
  margin: 0;
  padding-left: 55px;
} */

.el-menu {
  /* height: calc(100% - 60px); */
  height: 100%;
  border-right: 0;
  /* height: 100%; */
}

/* .el-row {
  height: 100%;
} */
</style>>